<script setup>
import {ref, watch, defineProps} from 'vue'
import {useMouseInElement} from '@vueuse/core'
// 接收props，图片列表
const props = defineProps({
  imageList: {
    type: Object,
    required: true
  }
})
// 1.小图切换大图显示
const activeIndex = ref(0)
const enterhandler = (index) => {
  activeIndex.value = index
}

// 2. 获取鼠标相对位置
const target = ref(null)
const positionX = ref(0)
const positionY = ref(0)
const {elementX, elementY, isOutside} = useMouseInElement(target)
// 3. 控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化 重新设置left/top）
const left = ref(0)
const top = ref(0)
watch([elementX, elementY, isOutside], () => {
  // 鼠标在图片外面，不显示滑块
  if (isOutside.value) return
//   有效范围内控制滑块的距离
//   横像：图片宽度 - 蒙层宽度
//   纵向：图片高度 - 蒙层高度
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX.value - 100
  }
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementY.value - 100
  }

  // 处理边界
  if (elementX.value > 300) { left.value = 208 }
  if (elementX.value < 100) { left.value = 0 }

  if (elementY.value > 300) { top.value = 208 }
  if (elementY.value < 100) { top.value = 0 }

  // 控制大图的显示
  positionX.value = -left.value * 2
  positionY.value = -top.value * 2
})


</script>

<template>
  <div class="image-view">
    <!-- 左侧大图-->
    <div ref="target" class="big-img">
      <img :src="imageList[activeIndex]" alt="图像"/>
      <!-- 蒙层小滑块 -->
      <div class="layer" v-show="!isOutside" :style="{ left: `${left}px`, top: `${top}px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small-img">
      <li v-for="(img, index) in imageList" :key="index"
          :class="{ active: index === activeIndex }"
          @mouseenter="enterhandler(index)"
      >
        <img :src="img" alt="图像"/>
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div class="large-img" :style="[
        {
          backgroundImage: `url(${imageList[activeIndex]})`,
          // 控制背景图的移动来实现放大的效果
          backgroundPositionX: `${positionX}px`,
          backgroundPositionY: `${positionY}px`,
        }
    ]" v-show="!isOutside"></div>
  </div>
</template>

<style lang="scss" scoped>
.image-view {
  display: flex;
  position: relative;

  .big-img {
    width: 415px;
    height: 415px;
    position: relative;
    cursor: pointer;

    .layer {
      position: absolute;
      width: 208px;
      height: 208px;
      // 绝对定位 然后跟随鼠标控制left和top属性就可以让滑块移动起来
      left: 50px;
      top: 30px;
      background: rgba(0, 0, 0, 0.2);
    }
  }

  .small-img {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin: 0 0 15px 12px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid #27ba9b;
      }
    }
  }

  .large-img {
    position: absolute;
    left: 427px;
    top: 0;
    width: 415px;
    height: 415px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }
}

</style>